<template>
	<el-form
		:model="user"
		ref="registerForm"
		:rules="rules"
		label-width="100px"
	>
		<el-form-item label="用户名:" prop="username">
			<el-input v-model="user.username"></el-input>
		</el-form-item>

		<el-form-item label="密码:" prop="password">
			<el-input v-model="user.password" show-password></el-input>
		</el-form-item>

		<el-form-item label="昵称:">
			<el-input v-model="user.nick"></el-input>
		</el-form-item>

		<el-form-item label="角色:" prop="role_id">
			<el-select v-model="user.role_id" placeholder="请选择角色">
				<el-option
					v-for="item in roles"
					:key="item.r_id"
					:label="item.rolename"
					:value="item.r_id"
				>
				</el-option>
			</el-select>
		</el-form-item>

		<el-form-item label="头像" v-show="!isEdit">
			<el-upload
				name="headerimg"
				ref="uploadHeader"
				action="/"
				:auto-upload="false"
				:show-file-list="false"
				:before-upload="beforeAvatarUpload"
				:on-change="onChangeFile"
			>
				<img v-if="imageUrl" :src="imageUrl" class="avatar" />
				<i v-else class="el-icon-plus avatar-uploader-icon"></i>
			</el-upload>
		</el-form-item>

		<el-form-item>
			<el-button type="primary" @click="onSubmit">添加</el-button>
		</el-form-item>
	</el-form>
</template>

<script>
import { RequestRegister } from '@/api/user'
import { RequestRoles } from '@/api/system'
import Sha256 from 'js-sha256'
export default {
	props: {
		editData: Object,
		isEdit: Boolean
	},
	data() {
		return {
			user: {
				username: '',
				password: '',
				nick: '',
				role_id: ''
			},
			headerimg: null,
			imageUrl: '', //预览图片
			rules: {
				username: {
					required: true,
					message: '请输入用户名称',
					trigger: 'blur'
				},
				password: {
					required: true,
					message: '请输入密码',
					trigger: 'blur'
				},
				roleId: {
					required: true,
					message: '请选择角色',
					trigger: 'blur'
				}
			},
			roles: []
		}
	},
	created() {
		this.getRoles()
		if (this.isEdit) {
			this.user = this.editData
		}
	},
	methods: {
		/**
		 * 注册提交
		 */
		onSubmit() {
			this.$refs.registerForm.validate(validate => {
				if (validate) {
					if (this.isEdit) {
						this.$message({
							type: 'error',
							message: '编辑开发中!'
						})
						// 通知关闭窗口
						this.$emit('on-close')
					} else {
						let formData = new FormData()
						formData.append('username', this.user.username)
						formData.append('password', Sha256(this.user.password))
						formData.append('nick', this.user.nick)
						formData.append('headerimg', this.headerimg)
						RequestRegister(formData)
							.then(data => {
								let { resultCode, resultInfo } = data
								if (resultCode === 1) {
									this.$message({
										type: 'success',
										message: '添加成功!'
									})
									// 通知关闭窗口
									this.$emit('on-close')
								} else {
									this.$message({
										type: 'error',
										message: '添加失败!' + resultInfo
									})
								}
							})
							.catch(err => {
								this.$message({
									type: 'error',
									message: '添加失败!' + err
								})
							})
					}
				}
			})
		},

		/**
		 * 返回登录界面
		 */
		onBackLogin() {
			this.$router.replace({ path: '/login' })
		},
		/**
		 * 头像上传前
		 *  图片格式 大小检查
		 */
		beforeAvatarUpload(file) {
			const isJPG = file.type === 'image/jpeg'
			const isLt2M = file.size / 1024 / 1024 < 2

			if (!isJPG) {
				this.$message.error('上传头像图片只能是 JPG 格式!')
			}
			if (!isLt2M) {
				this.$message.error('上传头像图片大小不能超过 2MB!')
			}
			return isJPG && isLt2M
		},
		/**
		 * 选中本地图片触发
		 */
		onChangeFile(file) {
			this.headerimg = file.raw
			this.imageUrl = URL.createObjectURL(file.raw)
		},
		async getRoles() {
			let data = await RequestRoles()
			let { resultCode, resultInfo } = data
			if (resultCode === 1) {
				this.roles = resultInfo.roles
			}
		},
		/**
		 * 关闭
		 */
		close() {
			this.isEdit = false
			this.isVisibleDialog = false
			this.editData = {}
		}
	}
}
</script>

<style lang="scss" scoped>
.cart {
	width: 500px;
	margin: 100px auto;
}
.avatar-uploader .el-upload {
	border: 1px dashed #d9d9d9;
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}
.avatar-uploader .el-upload:hover {
	border-color: #409eff;
}
.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 178px;
	height: 178px;
	line-height: 178px;
	text-align: center;
}
.avatar {
	width: 178px;
	height: 178px;
	display: block;
}
</style>